<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        window.onload=function(){
           //1.定义组件
           var student={
               template:`
                    <div>
                        <h1>student-list页面</h1>
                    </div>
               `
           }
           var teacher={
               created(){
                    console.log(this.$route.query)
                    //发送请求，请求当前用户的详情信息
               },
               template:`
                    <div>
                        <h1>teacher-list页面</h1>
                    </div>
               `
           }
           var user={
               created(){
                   console.log(this.$route.params)
               },
               template:`
                    <div>
                        <h1>user-list页面</h1>
                    </div>
               `
           }

           //2.定义路由
           var router=new VueRouter({
               routes:[{
                   path:'/',
                   redirect:'/student'
               },{
                   path:'/student',
                   name:'student-a',
                //    redirect:'/teacher',
                   component:student
               },{
                   path:'/teacher',
                   name:'teacher-a',
                   alias:'/a',
                   component:teacher
               },{
                   path:'/user',
                   name:'user-a',
                   component:user
               }]
           })
           //3.挂载路由到vue实例上
           new Vue({
               el:'#app',
               data:{
                 student:{path:'/student'}
               },
               router
           })
        }
    </script>
</head>
<body>
    <div id="app">
        <h1>vue-router页面</h1>
        <!-- <router-link to="/student">跳转到student页面</router-link> -->
        <!-- <router-link :to='{path:"/student"}'></router-link> -->
        <router-link :to='student'>跳转到student页面</router-link>
        <!-- <router-link to="/teacher">跳转到teacher页面</router-link> -->
        <router-link :to="{path:'/a',query:{id:9}}">跳转到teacher页面</router-link>
        <!-- <router-link to="/user">跳转到user页面</router-link> -->
        <router-link :to="{name:'user-a',params:{id:10}}">跳转到user页面</router-link>
        <div id="container">
            <router-view></router-view>
        </div>
    </div>
</body>
</html>